<!DOCTYPE html>
<html style="background-color: #f2f2f2;" lang="en">
<%include("/common/header.html",{title:''}){}%>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                    <span style="color: #05aaaa;">总用水量</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                    <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-water"></i><span style="margin-left: 70px;color: #05aaaa;">13</span></p>
                    <p>
                        <span style="float:right;color: #05aaaa;">m³</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                    <span style="color: #05aaaa;">总水费</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                    <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-rmb"></i><span style="margin-left: 70px;color: #05aaaa;">13</span></p>
                    <p>
                        <span style="float:right;color: #05aaaa;">元</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                    <span style="color: #05aaaa;">今日用水量</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                    <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-water"></i><span style="margin-left: 70px;color: #05aaaa;">13</span></p>
                    <p>
                        <span style="float:right;color: #05aaaa;">m³</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                    <span style="color: #05aaaa;">今日水费</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                    <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-rmb"></i><span style="margin-left: 70px;color: #05aaaa;">13</span></p>
                    <p>
                        <span style="float:right;color: #05aaaa;">元</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                    <span style="color: #05aaaa;">单位面积用水量</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                    <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-water"></i><span style="margin-left: 70px;color: #05aaaa;">13</span></p>
                    <p>
                        <span style="float:right;color: #05aaaa;">m³</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                    <span style="color: #05aaaa;">单位面积水费</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                    <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-rmb"></i><span style="margin-left: 70px;color: #05aaaa;">13</span></p>
                    <p>
                        <span style="float:right;color: #05aaaa;">元</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-header">逐时用水量统计</div>
                        <div class="layui-card-body">
                            <table class="layui-table" lay-skin="line">
                                <tbody>
                                <tr>
                                    <td >
                                        <div id="container5" style="width:1205px; height:300px"></div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-header">逐月用水量统计</div>
                        <div class="layui-card-body">
                            <table class="layui-table" lay-skin="line">
                                <tbody>
                                <tr>
                                    <td >
                                        <div id="container6" style="width:1205px; height:300px"></div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12">
            <div class="layui-card">
                <!--<div class="layui-card-header">项目类表</div>-->
                <div class="layui-card-body">
                    <table class="layui-table layuiadmin-page-table" lay-skin="line">
                        <thead>
                        <tr>
                            <th style="width: 22%;">时间</th>
                            <th style="width: 22%;">通道号</th>
                            <th style="width: 22%;">正向累积量</th>
                            <th style="width: 22%;">设备编号</th>
                            <th>正向累积量单位</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>2020-03-15</td>
                            <td>1号</td>
                            <td>43</td>
                            <td>TB343</td>
                            <td>单位</td>
                        </tr>
                        <tr>
                            <td>2020-03-29</td>
                            <td>2号</td>
                            <td>32</td>
                            <td>TB533</td>
                            <td>单位</td>
                        </tr>
                        <tr>
                            <td>2020-03-05</td>
                            <td>3号</td>
                            <td>34</td>
                            <td>TB933</td>
                            <td>单位</td>
                        </tr>
                        <tr>
                            <td>2020-03-14</td>
                            <td>4号</td>
                            <td>15</td>
                            <td>TB235</td>
                            <td>单位</td>
                        </tr>
                        <tr>
                            <td>2020-03-30</td>
                            <td>5号</td>
                            <td>35</td>
                            <td>TB935</td>
                            <td>单位</td>
                        </tr>
                        <tr>
                            <td>2020-03-18</td>
                            <td>6号</td>
                            <td>23</td>
                            <td>TB730</td>
                            <td>单位</td>
                        </tr>
                        <tr>
                            <td>2020-03-09</td>
                            <td>7号</td>
                            <td>25</td>
                            <td>TB630</td>
                            <td>单位</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<%include("/common/foot.html"){}%>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
    //////////////////////////////////////////////////////
    //柱图（用水量）
    var dom = document.getElementById("container5");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: '逐时用水量柱状图',
            subtext: '当日',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            axisLabel: {
                interval:0,
                rotate:40
            },
            type: 'category',
            data: ['00:00:00-01:00:00', '01:00:00-02:00:00', '02:00:00-03:00:00', '03:00:00-04:00:00',
                   '04:00:00-05:00:00', '05:00:00-06:00:00', '06:00:00-07:00:00', '07:00:00-08:00:00',
                   '08:00:00-09:00:00', '09:00:00-10:00:00', '10:00:00-11:00:00', '11:00:00-12:00:00',
                   '12:00:00-13:00:00', '13:00:00-14:00:00', '14:00:00-15:00:00', '15:00:00-16:00:00',
                   '16:00:00-17:00:00', '17:00:00-18:00:00', '18:00:00-19:00:00', '19:00:00-20:00:00',
                   '20:00:00-21:00:00', '21:00:00-22:00:00', '22:00:00-23:00:00', '23:00:00-00:00:00']
        },
        yAxis: {
            name: '用水量/m³',
            type: 'value'
        },
        series: [{
            name: '用水量',
            data: [12, 20, 15, 8, 7, 11, 13],
            type: 'bar',
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '0%',
            top: '25%',
            containLabel: true
        }
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    //////////////////////////////////////////////////////
    //柱图（用水量）
    var dom = document.getElementById("container6");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: '逐月用水量柱状图',
            subtext: '当月',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月',
                '十一月', '十二月']
        },
        yAxis: {
            name: '用水量/m³',
            type: 'value'
        },
        series: [{
            name: '用水量',
            data: [12, 20, 15, 8, 7, 11, 13],
            type: 'bar',
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '0%',
            top: '25%',
            containLabel: true
        }
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>